<template>
  <div class="pages-wrapper">
    <div class="left">
      <el-form :model="formData" label-width="100px" :rules="rules" ref="formData">
        <el-form-item label="中心">
          <el-select
            v-model="formData.ctrId"
            placeholder="请选择"
            style="width:100%"
            clearable
            multiple
            collapse-tags
            class="w-select"
            reserve-keyword
            @visible-change="centerVisible($event)"
            @change="changeCenter"
            @remove-tag="removeCen"
          >
            <el-option
              label="全选"
              value="全选"
              v-if="centers.length>1"
              @click.native="selectCenterAll()"
            ></el-option>
            <el-option
              v-for="item in centers"
              :key="item.orgCode"
              :value="item.orgCode"
              :label="item.orgName"
            ></el-option>
          </el-select>
        </el-form-item>
       <el-form-item label="部门">
          <el-select
            v-model="formData.deptId"
            placeholder="请选择"
            style="width:100%"
            clearable
            multiple
            collapse-tags
            class="w-select"
            reserve-keyword
            @visible-change="depIdVisible($event)"
            @change="changeDep"
            @remove-tag="removeDep"
          >
            <el-option
              label="全选"
              value="全选"
              v-if="departments.length>1"
              @click.native="selectDepAll()"
            ></el-option>
            <el-option
              v-for="item in departments"
              :key="item.orgCode"
              :value="item.orgCode"
              :label="item.orgName"
            ></el-option>
          </el-select>
        </el-form-item>
       <el-form-item label="系统">
          <el-select
            v-model="formData.systemId"
            placeholder="请选择"
            style="width:100%"
            clearable
            multiple
            collapse-tags
            class="w-select"
            reserve-keyword
            @visible-change="centerVisible($event)"
            @change="changeCenter"
            @remove-tag="removeCen"
          >
            <el-option
              label="全选"
              value="全选"
              v-if="centers.length>1"
              @click.native="selectCenterAll()"
            ></el-option>
            <el-option
              v-for="item in centers"
              :key="item.orgCode"
              :value="item.orgCode"
              :label="item.orgName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代码库">
          <el-select
            v-model="formData.projectCode"
            placeholder="请选择"
            style="width:100%"
            clearable
            :disabled="codeDisabled"
            multiple
            collapse-tags
            class="w-select"
            reserve-keyword
            @visible-change="centerVisible($event)"
            @change="changeCenter"
            @remove-tag="removeCen"
          >
            <el-option
              label="全选"
              value="全选"
              v-if="centers.length>1"
              @click.native="selectCenterAll()"
            ></el-option>
            <el-option
              v-for="item in centers"
              :key="item.orgCode"
              :value="item.orgCode"
              :label="item.orgName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-button type="primary" size="mini" @click="getMap">查询</el-button>
          <!--          <el-button  @click="getMap">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="right_cen">
        <div class="cen_1">
          <div>
            <span class="cen_text">88/</span>
            100
          </div>
          <span>工程能力总分</span>
        </div>
        <div>=</div>
        <!--        <template v-for="(item, index) in scoreInfo.scoreItem">-->
        <div class="cen_1">
          <div>
            <span class="cen_text">11/</span>
            20
          </div>
          <span>需求管理</span>
        </div>
        <div class="add">+</div>
        <!--        </template>-->
        <div class="cen_1">
          <div>
            <span class="cen_text">11/</span>
            20
          </div>
          <span>需求管理</span>
        </div>
        <div class="add">+</div>
        <div class="cen_1">
          <div>
            <span class="cen_text">11/</span>
            20
          </div>
          <span>需求管理</span>
        </div>
        <div class="add">+</div>
        <div class="cen_1">
          <div>
            <span class="cen_text">11/</span>
            20
          </div>
          <span>需求管理</span>
        </div>
        <div class="add">+</div>
        <div class="cen_1">
          <div>
            <span class="cen_text">11/</span>
            20
          </div>
          <span>需求管理</span>
        </div>
        <div class="add">+</div>
      </div>
      <div class="right_cen1">
        <!--        <template v-for="(item, index) in  leverColorInfo">-->
        <div class="cen1_1">
          <div class="cen1_btn" style="background: #cccccc"></div>
          <span>None</span>
        </div>
        <!--        </template>-->
        <div class="cen1_1">
          <div class="cen1_btn btn_l0" style="background: #9add2c"></div>
          <span>L1</span>
        </div>
        <div class="cen1_1">
          <div class="cen1_btn btn_l1" style="background: #70b603"></div>
          <span>L2</span>
        </div>
        <div class="cen1_1">
          <div class="cen1_btn btn_l2" style="background: #4b7902"></div>
          <span>L3</span>
        </div>
      </div>
      <div class="right_cen2">
        <div class="cen2_1">
          <div class="cen2_1_text">需求管理</div>
          <!--            <template v-for="(it, index) in item.powerItems">-->
          <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
          <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
          <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
          <!--            </template>-->
        </div>
        <div class="cen2_1">
          <div class="cen2_1_text">开发管理</div>
          <div>
            <!--            <template v-for="(it, index) in item.powerItems">-->
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <!--            </template>-->
          </div>
        </div>
        <div class="cen2_1">
          <div class="cen2_1_text">测试管理</div>
          <div>
            <!--            <template v-for="(it, index) in item.powerItems">-->
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <!--            </template>-->
          </div>
        </div>
        <div class="cen2_1">
          <div class="cen2_1_text">配置管理</div>
          <div>
            <!--            <template v-for="(it, index) in item.powerItems">-->
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <!--            </template>-->
          </div>
        </div>
        <div class="cen2_1">
          <div class="cen2_1_text">流水线</div>
          <div>
            <!--            <template v-for="(it, index) in item.powerItems">-->
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <div class="cen2_1_btn" @click="showItem(it)" style="{background: green}">需求规格化</div>
            <!--            </template>-->
          </div>
        </div>
      </div>
      <div class="right_cen3">
        <div class="right_cen3_1">
          <div class="right_cen3_top" @click="handleShow">冒烟测试提测占比</div>
          <div class="right_cen3_center">89%</div>
          <div class="right_cen3_bottom">
            <span>下一个目标</span>
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l0" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l1" style="background: #70b603"></div>
              <span>L2</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #4b7902"></div>
              <span>L3</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
        </div>
        <div class="right_cen3_1">
          <div class="right_cen3_top">冒烟测试提测占比</div>
          <div class="right_cen3_center" @click.once="showqu">89%</div>
          <div class="right_cen3_bottom">
            <span>下一个目标</span>
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l0" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l1" style="background: #70b603"></div>
              <span>L2</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #4b7902"></div>
              <span>L3</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
        </div>
        <div class="right_cen3_1">
          <div class="right_cen3_top">冒烟测试提测占比</div>
          <div class="right_cen3_center">89%</div>
          <div class="right_cen3_bottom">
            <span>下一个目标</span>
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l0" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l1" style="background: #70b603"></div>
              <span>L2</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #4b7902"></div>
              <span>L3</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
        </div>
        <div class="right_cen3_1">
          <div class="right_cen3_top" @click="handleShow">冒烟测试提测占比</div>
          <div class="right_cen3_center">89%</div>
          <div class="right_cen3_bottom">
            <span>下一个目标</span>
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l0" style="background: #9add2c"></div>
              <span>L1</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l1" style="background: #70b603"></div>
              <span>L2</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
          <div class="right_cen3_bottom">
            <div class="cen1_1">
              <div class="cen1_btn btn_l2" style="background: #4b7902"></div>
              <span>L3</span>
              <div class="describe">故事占比99%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right_cen4">
        <echartsEnginneer v-if="showEcharts"></echartsEnginneer>
      </div>
    </div>
  </div>
</template>

<script>
import echartsEnginneer from "./component/echartsEnginneer";
export default {
  name: "engineeringCapablity",
  components: { echartsEnginneer },
  data() {
    return {
      showEcharts: false,
      codeDisabled:true,
      formData: {
        ctrId: "",
        deptId: "",
        systemId: "",
        projectCode: "",
      },
      rules: {
        systemId: [{ required: true, message: "系统必填", trigger: "blur" }],
        projectCode: [
          { required: true, message: "代码库必填", trigger: "blur" },
        ],
      },
      centers:[
        {orgCode:'1',orgName:'永赢租凭'},
        {orgCode:'2',orgName:'数据中心'},
        {orgCode:'3',orgName:'测试中心'},
      ],
      departments:[
        {orgCode:'1',orgName:'消金项目组'},
        {orgCode:'2',orgName:'业务测试二部'},
        {orgCode:'3',orgName:'基础设施部'},
      ],
      systems:[
        {orgCode:'1',orgName:'永赢租凭'},
        {orgCode:'2',orgName:'数据中心'},
        {orgCode:'3',orgName:'测试中心'},
      ],
      codeBases:[
        {orgCode:'1',orgName:'永赢租凭'},
        {orgCode:'2',orgName:'数据中心'},
        {orgCode:'3',orgName:'测试中心'},
      ],
    };
  },
  methods: {
    getMap() {},
    handleShow() {
      this.showEcharts = true;
    },

    //中心
    centerVisible(event){
      if(event===true){
        //调接口
      }
    },
    selectCenterAll(){
      if(this.formData.ctrId.length<this.centers.length){
        this.formData.ctrId=[]
        this.centers.map((item)=>{
          this.formData.ctrId.push(item.orgCode)
        })
        this.formData.ctrId.unshift('全选')
      }else{
        this.formData.ctrId=[]
      }
    },
    changeCenter(val){
     if(!val.includes('全选')&&val.length===this.centers.length){
       this.formData.ctrId.unshift('全选')
     }else if(val.includes('全选')&&val.length-1<this.centers.length){
       this.formData.ctrId=this.formData.ctrId.filter(item=>{
         return item!=='全选'
       })
     }
    },
    removeCen(val){
      if(val==='全选'){
        this.formData.ctrId=[]
      }
    },
     //部门
    depIdVisible(event){
      if(event===true){
        //调接口
      }
    },
    selectDepAll(){
      if(this.formData.deptId.length<this.departments.length){
        this.formData.deptId=[]
        this.departments.map((item)=>{
          this.formData.deptId.push(item.orgCode)
        })
        this.formData.deptId.unshift('全选')
      }else{
        this.formData.deptId=[]
      }
    },
    changeDep(val){
     if(!val.includes('全选')&&val.length===this.departments.length){
       this.formData.deptId.unshift('全选')
     }else if(val.includes('全选')&&val.length-1<this.departments.length){
       this.formData.deptId=this.formData.deptId.filter(item=>{
         return item!=='全选'
       })
     }
    },
    removeDep(val){
      if(val==='全选'){
        this.formData.deptId=[]
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.w-select{
  
  ::v-deep .el-select__tags-text{
    overflow: hidden;
      max-width: 20px;
  }
}
</style>
